<template>
	<view>
		<custom-tabbar :current='2'></custom-tabbar>
		<ul>
			<li class="community-circle">
				<view class="top">
					<view class="top-l">
						<u--image width='100rpx' height='100rpx'
							src="https://gd-hbimg.huaban.com/e9871904752819d02fcb42426aa68f2929682f4211ce7d-rqoaUW_fw658webp"
							shape="circle"></u--image>
						<view>
							<p>嗨嗨</p>
							<p>户外达人</p>
						</view>
						<view>
							<uni-icons custom-prefix="iconfont" type="icon-huiyuanVIP" size="20"></uni-icons>
						</view>
					</view>
					<view>
						<button>关注</button>
					</view>
				</view>
				<view class="bottom">
					<ul>
						<li>
							<p>晒经验康骨盆保养·改善久坐久卧不良体态
								这个全序列动作设计都是围绕骨盆区域来的，促进局部血液循环，滋养骨盆，女性非常友好，还能改善坐姿不良体态造成的肌肉劳损造成的腰酸背疼，舒缓且强度很全部
							</p>
							<ul class="bottom-img">
								<li>
									<u-image width='350rpx' height='350rpx'
										src="https://gd-hbimg.huaban.com/8130b3eae29ff1f7b4090fb2cb29eb093a8bd2c8ba75-Lp2oin_fw658webp">
									</u-image>
								</li>
								<li>
									<u-image width='350rpx' height='350rpx'
										src="https://gd-hbimg.huaban.com/a8420442654b73ce3deec21b46d2779c7997df9b26840-KhSO5V_fw658webp">
									</u-image>
								</li>
								<li>
									<u-image width='350rpx' height='350rpx'
										src="https://gd-hbimg.huaban.com/c97d71901e9cacb3b8e3a707134c04d1733cc588189f1-XgWXpv_fw658webp">
									</u-image>
								</li>
								<li>
									<u-image width='350rpx' height='350rpx'
										src="https://gd-hbimg.huaban.com/c97d71901e9cacb3b8e3a707134c04d1733cc588189f1-XgWXpv_fw658webp">
									</u-image>
								</li>
							</ul>
						</li>
						<li>
						</li>
					</ul>

				</view>
				<view class="footer">
					<view class="footer-l">
						<image src="../../static/image/laba (1).svg" mode=""></image>
						<image src="../../static/image/24gl-bubble2.svg"></image>
						<image src="../../static/image/xingxing.svg"></image>

					</view>
					<image src="../../static/image/fenxiang.svg" mode=""></image>
				</view>
			</li>
		</ul>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		}
	}
</script>

<style lang="scss">
	* {
		padding: 0;
		margin: 0;
	}

	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: skyblue;
		padding-left: 10px;

		.top-l {
			width: 160px;
			display: flex;
			justify-content: space-around;
		}

		button {
			width: 70px;
			height: 30px;
			line-height: 30px;
			font-size: 12px;
			border-radius: 15px;
			color: white;
			background-color: #24c789;
		}
	}

	.bottom {
		ul {
			list-style: none;

			li {
				p {
					width: 100%;
					margin: 0px 10px 10px 0;
					background-color: gold;
					// overflow: hidden;
					// white-space: nowrap;
					// text-overflow: ellipsis;
					-webkit-line-clamp: 4;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.bottom-img {
			display: flex;

			flex-wrap: wrap;

			li {
				margin: 10px 1px 10px 10px;
			}

		}
	}

	.footer {
		margin: 0px 10px 0px 10px;
		display: flex;
		justify-content: space-between;

		.footer-l {
			width: 200px;
			display: flex;
			justify-content: space-around;


		}

		image {
			width: 20px;
			height: 20px;
		}
	}
</style>
